<!DOCTYPE html>
<html lang="zh-CN" ng-app="share">

	<head>
		<meta charset='utf-8' />
		<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//apps.bdimg.com/libs/vue/1.0.14/vue.js"></script>

<script type="text/javascript">
	$(function () {
		new Vue({
			el:'#content',
			data:{
				hash:'abb',
			}
			
		})
	})
	
</script>
</head>

<body>
	<div id='content'>
		<logo-input up_url="" img_url="" id='dog'></logo-input>
		<!--<file-loader :upload_url='hash'></file-loader>-->
	</div>
	
<script for='logo-input' type="text/javascript">
 
    Vue.component('logo-input',{
        template:'#logo-input',
        props:['up_url','img_url','id'],
        methods:{
            clear:function () {
                this.img_url=''
                $('#'+this.id).val('')
            }
        }
    })
 
</script>
 
<template id='logo-input'>
	<div class='up_wrap'>
		<file-loader id='id_for_logo'
			accept='image/gif, image/jpeg,image/png' 
			:upload_url='up_url'
			:url.sync= 'img_url' 
			class='logo-input'>
		</file-loader>
		<div style="padding: 40px">
			<a class='choose'>Choose</a>
		</div>
		<div v-if='img_url' class="closeDiv">
			<div class="close" @click='img_url=""'>X</div>
			<img :src="img_url" alt="" class="logoImg">
		</div>
	</div>
</template>
 
<style type="text/css" media="screen" v-if='is_first'>
	.up_wrap{
		position: relative;
		text-align: center;
		border: 2px dashed #ccc;
		background: #FDFDFD;
		width:300px;
	}
	.logo-input{
		opacity: 0;
		position: absolute;
		top: 40px;
		left: 40px;
		display: block;
		cursor: pointer;
	}
	.closeDiv{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #ffffff;
	}
	.choose{
		display: inline-block;
		text-decoration: none;
		padding: 5px;
		border: 1px solid #0092F2;
		border-radius: 4px;
		font-size: 14px;
		color: #0092F2;
		cursor: pointer;
	}
	.choose:hover,.choose:active{
		text-decoration: none;
		color: #0092F2;
	}
	.close{
		position: absolute;
		top: 5px;
		right: 10px;
		cursor: pointer;
		font-size: 14px;
		color: #242424;
	}
	.logoImg{
		max-height: 100px !important;
		vertical-align: middle;
		margin-top: 5px;
	}
	.req_star{
		color: red;
		font-size: 200%;
	}
</style>

<script type="text/javascript">
	Vue.component('file-loader',{
    template:"<input model='filebody' type='file' @change='changed'>",
    props:{
            upload_url:{    // 这个地址是服务器接收文件的url
                type: String,
                required: true
            },
            url:{           // 这个地址是服务器返回的，表示文件的web访问地址
                type: String,
                //twoWay:true
            },
            ready:{},
        },
    methods:{
        changed:function (changeEvent) {
            var file=changeEvent.target.files[0];
            if(!file)
                return
            this.fd = new FormData();  // 通过监听change事件，利用FormData元素上传文件内容
            this.fd.append('file', file);
            this.ready=true;
            this.upload()
        },
        upload:function () {
            var self =this;
            $.ajax({
                url:this.upload_url,
                type:'post',
                data:this.fd,
                contentType: false,
                cache: false,
                success:function (data) {
                    self.url=data.url;
                },
                processData:false    // 注意必须有这一行
            })
        }
    }
});
</script>
</body>
</html>
